<template>
 <GlobalCardBox :title="getTitle" :showDown="SEARCHARTICLEDOWN">
     <div class="content flex" slot="content"> 
         <!-- 输入框 -->
           <div  class="title flex">
               <input id="titleInput" v-model="title" @input='filterTitle($event.target)' maxlength="30"
                  placeholder="输入搜索的标题" autocomplete="off"/>
            </div>

             <el-select v-model="index" placeholder="请选择" class="select" @change="anti_shake">
                  <el-option
                     v-for="item in SearchType"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                  </el-option>
               </el-select>
               
               <div v-if="ArticleData?.length == 0" class="article">
                  <div class="backImage">
                     <img :src="require('@/assets/state/'+getImage)" >
                     <div class="text-center">{{message}}</div>
                  </div>
               </div>

               <!-- 内容 -->
               <div class="article" v-else>
                    <div v-for=" item in ArticleData" :key="item.id" class="articleOne flex" @click="ToArticleDetail(item)">
                        <img :src="item.createdCover" v-if="item.createdCover" class="image">
                        <div class='info'>
                            <div class="title_ overflow">{{item.title}}</div>
                            <div class="detail flex">
                                <!-- <img :src="item.headphoto" class="headphoto"> -->
                                <div class="overflow username">作者:{{item.username}}</div>

                            </div>
                        </div>
                    </div>
               </div>
     </div>
 </GlobalCardBox>
</template>
<script>
import GlobalCardBox from '@/components/Package/GlobalCardBox/GlobalCardBox.vue'
import { mapMutations,mapActions, mapState } from 'vuex'
import common from "@/common/global"
import request from '@/axios'
import commonData from "@/common/data"

  export default 
  {
     components: { GlobalCardBox },
     name :'',
     data() {
        return {
            title:'',
            index:1,
            timer:null,
            code:200,
            message:'空数据',
            ArticleData:[],
            SearchType:[
                {label:'发布',value:1},
                {label:'收藏',value:2},
                {label:'喜欢',value:3},
            ]
        }
     },
     computed:{
         ...mapState('Personal',['PersonalData','NaviIndex']),
         ...mapState('Login',['User']),
         getImage(){
             let res = commonData.errorImageList.find(item => item.code == this.code)
             return res.src
         },
         getTitle(){
             let res = '搜索'
             if(this.User && this.User?.uid == this.PersonalData?.uid) res += '我'
             else res += this.PersonalData?.username

             if(this.index == 1) res += '发布'
             else if(this.index == 2) res += '收藏'
             else if(this.index == 3)  res += '喜欢'
             res += '的文章'
             return res
         }
     },
     created(){
       this.init()
     },
     methods: {
        ...mapMutations('Personal',['SEARCHARTICLEDOWN']),
           ToArticleDetail(item){
            if(item.articleState ==0 ) return this.$message.warning('文章审核中...')
            this.$router.push({path:'/articleDetail', query: {id:item.id} })
          },

           filterTitle(e) {
		 	  this.title = e.value.trimLeft()
              this.title = common.filterSensitiveInfo(this.title)
              this.anti_shake()
	    	},
            anti_shake(){
                clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    if(this.title !=null &&  this.title != '')
                    this.search()
                    else   {
                        this.ArticleData = []
                        this.code =  200
                        this.message = '空数据'
                    }
                   }, 200);
            },
           async  search(){
                let homeUid = this.PersonalData?.uid
                let createdUid = this.User?.uid
                let likeState = -1
                let collectState = -1
                let pageState = 0
                let title = this.title
                 if(this.index == 2) collectState = 1
                else if(this.index == 3) likeState = 1 
               
                let res = await request.get('/api/article/search',{params:{homeUid,createdUid,likeState,collectState,pageState,title}})
                this.code = res.data.code || 200
                this.ArticleData = res.data.data || []
                this.message = res.data.message
                if( this.ArticleData.length == 0) this.message =  '空数据'

            
            },
            init(){
                this.index = this.NaviIndex
            }
     },

   
  }
</script>
<style scoped lang='less'>
::v-deep .el-input__inner{
    background: rgba(255, 255, 255, 0.5) !important;  
}
.content{
    justify-content: space-between;
    width: 100%;
    height: 100%;

}
// 标题
.title{
   height: 40px;
   width: 45%;
   border: 1px solid var(--GeneralBackColor);
   border-radius: 5px;
   flex-wrap: nowrap;
   #titleInput {
		width: 90%;
		border: none;
		font-size: 15px;
        margin-right: 5px;
	}
}
.select{
    width: 45%;
}
.article{
    width: 100%;
    height: 80%;
    overflow: auto;
    padding: 0 10px;
    box-sizing: border-box;

    

    .backImage{
        position: absolute;
        width: 40%;
        height: 90%;
        min-width: 200px;
        min-height: 200px;
        max-height: 90%;

        left: 50%;top: 50%;
        transform: translate(-50%,-45%);

        img{
            width: 100%;
            height: 80%;
        }
    }
}
.articleOne{
    width: 100%;
    flex-wrap: nowrap;
    margin: 10px 0;
    padding: 10px;
    box-sizing: border-box;
    justify-content: flex-start;
    border-radius: 5px;
    background: var(--GeneralBackColor);

   .info{
       width: 100%;
       margin-left: 5px;
       align-items: center;

       .title_{
           width: calc(100% - 100px);
           color: white;
           font-size: 18px;
            margin: 0 5px;
       }

       .detail{
          width: 100%;
          justify-content: flex-start;
          margin-top: 10px;

          img{
            width: 40px;
            height: 40px;
          }

          .username{
             color: white;
             margin: 0 5px;
          }
       }
   }

    .image{
        width: 100px;
        height: 100px;
    }
}
</style>